<script setup lang="ts">
import {ref,watch} from 'vue'
import {postFileApi } from '@/api/file'
import {UploadFile,UploadRawFile,ElMessage, genFileId} from 'element-plus'
import { useUserStore } from "@/stores/user";
   const props = defineProps({
    //要展示的用户信息
    userInfo:{
        require:true,
        type:Object
    },
    //判断是否要展示头像上传框
    shouUpload:{
        require:true,
        type:Boolean
    }
})

const showUserInfo = ref({})
watch(props.userInfo,(newVal)=>{
    console.log(newVal)
    showUserInfo.value = newVal
})
const emits = defineEmits()
//头像类型
const fileType = ['png','jpg','jpge']
const upload = ref(null)
const imgUrl=ref(props.userInfo.avatar)

//覆盖上一张图片
const handleExceed = (files:UploadFile)=>{
   upload.value!.clearFiles()
   const file = files[0] as UploadRawFile
   file.uid = genFileId()
   upload.value!.handleStart(file)
}
//
const onChange = async(file:UploadFile)=>{
    emits('setHeadImg',file.raw,props.userInfo)
}
</script>
<template> 
<!--  用户信息展示-->
    <el-card 
    class="el-card"
    shadow="hover">    
    <template #header >
        <div class="msg">
         <!-- 单独修改头像框 -->   
            <div v-if="shouUpload">
               <el-upload
               class="avatar-uploader"
               action="#"
               list-type="picture-card" 
               :limit="1"
               :on-exceed="handleExceed"
               :default="imgUrl"
               :on-change="onChange"
               :auto-upload="false">
                 <img v-if="imgUrl" :src="imgUrl" class="avatar" />
                 <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
               </el-upload>
            </div> 
            <!-- 用户信息展示 -->
            <el-avatar v-else
                shape="square"
                class="headImg"
                :size="60" 
                :src="userInfo.avatar" />
            <h4 class="row username">{{ userInfo.username }}</h4>
            <div class="roles">
                <span v-for="(role,index) in userInfo.roles" :key="index">
                {{ role.name }}
                </span>
            </div>
            <div class="row">注册时间：{{ props.userInfo.createdAt }}</div>
            <div class="row">电话号码：{{ props.userInfo.phone }}</div>
            <div class="row">邮箱：{{ props.userInfo.email }}</div>
            <div class="row">年龄：{{ props.userInfo.age }}</div>
            <div class="row individual">
                <span>个性签名： {{ userInfo.summary }}</span>
            </div>
        </div>
    </template>
    </el-card>
</template>

<style lang="scss" scoped>
// .el-card{
//     max-width: 100%; 
//     background-color: aliceblue;
    
//     .msg{
//         .avatar-uploader{
//             .avatar{
//                 width: 140px;

//                 .avatar-uploader-icon{

//                 }
//             }
//         }
//         .headImg{

//         }
//         .row{

//         }
//         .username{

//         }
//         .roles{

//         }
//         .individual{

//         }
//     }
// }

.el-card {
 // width: 100%;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  padding: 20px;
}

.avatar-uploader:hover {
  border-color: #409EFF;
}

.avatar {
  max-width: 100%;
  max-height: 100%;
}

.headImg {
  margin-bottom: 10px;
}

.row {
  display: flex;
  align-items: center;
}
</style>